<template>
  <div id="addmilk">
    <!-- 基础信息 -->
    <div>
      <!-- 标题 -->
      <title-panel title="基础信息"></title-panel>
      <!-- 基础信息表单 -->
      <van-form>
        <van-field
          required
          readonly
          clickable
          :value="sellDate"
          @click="showDateSelect = true"
          name="sellDate"
          label="销售日期"
          placeholder="请选择时间"
          label-width="10em"
           input-align="right"
           is-link
        >
        </van-field>
        <van-popup v-model="showDateSelect" position="bottom">
          <van-datetime-picker type="date" @confirm="onConfirm" @cancel="showDateSelect = false" />
        </van-popup>
        <van-field  input-align="right" required name="sellAmount" type="number" label="销售金额 (元)" placeholder="请填写"  label-width="10em"/>
        <van-field  input-align="right" @click='inputClick("000")' required readonly clickable name="sellTo" label="销售去向" placeholder="请选择企业" label-width="10em" is-link>
        </van-field>
        <van-field  input-align="right" required name="milkTotalNum" label="生鲜乳总数量 (kg)" type="number" :value='0' label-width="10em"/>
      </van-form>
    </div>
    <!-- 自产信息 -->
    <div>
      <!-- 标题 -->
      <title-panel title="自产信息"></title-panel>
      <!-- 表单 -->
      <van-field  input-align="right" required name="milkTotalNum2" label="生鲜乳总数量 (kg)" type="number"  label-width="10em" placeholder="请填写"/>
    </div>
    <!-- 收购明细 -->
    <div>
      <!-- 标题 -->
      <title-panel title="收购明细" :aadFlag="true" @addItem="addItem"></title-panel>
      <!-- 表单 -->
      <div  v-for="(item,index) in shouGouDetail" style="margin-bottom: 10px;">
        <van-form>
          <van-field
           input-align="right"
            @click="inputClick(index)"
            required
            readonly
            clickable
            label="生鲜乳来源"
            placeholder="请选择"
            label-width="10em"
            v-model="item.source"
            is-link
          >
          </van-field>
          <van-field  input-align="right" required readonly label="销售批次"  label-width="10em" v-model="item.productID"/>
          <van-field  input-align="right" required readonly label="生鲜乳总数量" type="number"  label-width="10em" v-model="item.productNum"/>
          <van-field  input-align="right"   center label-width="10em">
            <template #button>
              <van-button color="#999999" plain size="small" type="info" @click="deleteItem(index)">删除</van-button>
            </template>
          </van-field>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Form, Field, DatetimePicker, Popup, Icon, Button  } from 'vant'
import titlePanel from '@/components/titlePanel'
import rightArrow from '@/assets/img/right-arrow.png'
export default {
  name: '',
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [Button.name]: Button,
    titlePanel
  },
  data() {
    return {
      showDateSelect: false,
      sellDate: '',
      rightArrow,
      // 收购明细数据数组
      shouGouDetail:[
        {
          source: "",
          productID: "",
          productNum: ""
        }
      ]
    }
  },
  methods: {
    inputClick(index) {
      if (index === "000") {
        console.log("销售去向点击!");
      } else {
        console.log("生鲜乳来源点击!");
      }
    },
    onConfirm(time) {
      this.sellDate = new Date(time).toLocaleDateString()
      this.showDateSelect = false
    },
    deleteItem(index) {
      this.shouGouDetail.splice(index, 1)
    },
    addItem() {
      this.shouGouDetail.push({
          source: "",
          productID: "",
          productNum: ""
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 50px;
  background-color: transparent;
  align-items: center;
  font-size: 16px;
  color: #333;
  .left-border {
    width: 4px;
    height: 14px;
    background-color: #00b8b6;
    margin-right: 11px;
  }
}
</style>
